<template>
    <el-row>
        <el-col :span="4">
        {{  state.stock }}
        </el-col>
        <el-button type="success">{{  state.prop }}</el-button>
    </el-row>

    <el-row>
        <el-button @click="setProp('pct')">pct</el-button>
        <el-button @click="setProp('lp')">lp</el-button>
        <el-button @click="setProp('pct3D')">pct3D</el-button>
        <el-button @click="setProp('pct5D')">pct5D</el-button>
        <el-button @click="setProp('gt300d')">gt300d</el-button>
    </el-row>

    <div :id="'daily-histogram-echart'" :style="{ width: '1000px', height: '600px' }"></div>

    <el-drawer v-model="drawer"  :with-header="false" size="800px" >
        <el-table :data="state.drawerData"
            @cell-click="drawerCellClick"
        >
            <el-table-column prop="date" label="Date" width="140" sortable/>
            <el-table-column prop="stock" label="stock" width="140"/>
            <el-table-column prop="lp" label="lp" width="80" sortable/>
            <el-table-column prop="pct" label="pct" width="80" sortable/>
            <el-table-column prop="pct3D" label="pct3D" width="80" sortable/>
            <el-table-column prop="pct5D" label="pct5D" width="80" sortable/>
            <el-table-column prop="gt300d" label="gt300d" width="80" sortable/>
        </el-table>
    </el-drawer>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from 'echarts'
import { getDailyDetailData } from "../service/daily";
import { buildData } from "../myechart/HistogramEchart";
import { useRouteQuery } from "../utils/useRoute";
import { openNewTableDDisplay } from "../router";

let myChart = null

const drawer = ref(false)

const prop = defineProps({
    stock: String
})

const state = reactive({
     stock: "",
     binsMap: {},
     drawerData: [],
     rawData: "",
     prop: "pct",
     bins : 20
})

state.stock = prop.stock

state.bins = parseInt(useRouteQuery("bins", 20))

const initEchart = () => {
    myChart = echarts.init(document.getElementById('daily-histogram-echart'))
    myChart.resize();

    // 添加点击事件监听
    myChart.on('click', function(params) {
        drawer.value = true;
        state.drawerData = state.binsMap.get(params.dataIndex)
    });
}

const loadEchart = () => {
    getDailyDetailData(state.stock).then(res => {
        state.rawData = res.data.slice(-2000)
        buildDataV()
    })
}

const buildDataV = () => {
    let option = buildData(state.rawData, state.prop, state.bins)
    state.binsMap = option.myBinsMap
    myChart.setOption(option)
}

const setProp = (prop) => {
    state.prop = prop
    buildDataV()
}

const drawerCellClick = (row, column, cell, event) => {
    let prop = column.property
    console.log(prop)
    if (prop == 'date') {
        openNewTableDDisplay(row.stock, row.date)
    }
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>